<template>
	<view class="page">
		<view class="card" v-for="cart of cart_item" @click="test(cart)">
			<text class="shop-name">{{cart.shop_data.shop_name}}</text>
			<view class="dish-content" v-for="dish of cart.dish_data">
				<view class="dish-pic">
					<image src="@/static/images/common/dish_default.png"></image>
				</view>
				
				<view class="cart-info">
					<text class="dish-title">{{ dish.dish_name }}</text>
					<view class="dish-final-line">
						<text class="dish-price">￥{{ dish.dish_price }}元</text>
						<text class="dish-cnt">×{{ getDishQuantity(dish.dish_id, cart) }}</text>
					</view>
				</view>
			</view>
			<view class="total-pay">￥{{ cart.total_pay }}元</view>
		</view>
	</view>
</template>

<script setup>
	import { onMounted, reactive, ref } from 'vue';
	import { read_storage, write_storage } from '@/utils/storage.js'
	import { showLoading, hideLoading, listCopy } from '@/utils/main.js'
	import { httpGet } from '@/utils/request.js'
	
	const cart_data = reactive([])
	const cart_item = reactive([])
	function fetch_data() {
		showLoading()
		// cart_data
		const _cart_data = read_storage("cart_data")
		if (_cart_data) listCopy(cart_data, _cart_data)
		console.log("cart_data: ", cart_data)
		// request data
		for (let i of cart_data) {
			httpGet("/api/get_cart_data", {"shop_id": i.shop_id})
			.then((res) => {
				cart_item.push({
					"cart_id": i.cart_id,
					"shop_data": res.data.data.shop_data,
					"dish_data": res.data.data.dish_data,
					"cart_quantity": i.cart_data,
					"total_pay": i.total_pay
				})
			})
		}
		hideLoading()
	}
	onMounted(fetch_data)
	
	function getDishQuantity(_dish_id, _cart) {
		for (let i of _cart.cart_quantity) {
			if (i.dish_id == _dish_id) return i.quantity
		}
		return 1
	}
	
	function test(c) {
		console.log("test: ", c)
	}
	
</script>

<style scoped lang="scss">
	page {
		height: 100vh;
		background-color: $app-header-bk-color;
	}
	.page {
		width: 100%;
		height: fit-content;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.card {
		width: 700rpx;
		height: fit-content;
		border-radius: 20rpx;
		background-color: white;
		margin-bottom: 25rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.card:first-child {
		margin-top: 25rpx;
	}
	.card:last-child {
		margin-bottom: 135rpx;
	}
	
	.shop-name {
		width: 100%;
		font-size: 40rpx;
		margin: 10rpx 0;
		margin-left: 50rpx;
	}
	.dish-content {
		width: 100%;
		display: flex;
		margin-left: 50rpx;
		margin-bottom: 25rpx;
	}
	.dish-pic {
		$size: 160rpx;
		width: $size;
		height: $size;
		margin-right: 20rpx;
	}
	.dish-pic image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 20rpx;
	}
	.cart-info {
		width: 700rpx - 160 - 20 - 50;
		height: 160rpx;
		background-color: pink;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.dish-title {
		width: 100%;
		font-size: 30rpx;
	}
	.dish-final-line {
		display: flex;
		justify-content: space-between;
	}
	.dish-price {
		color: orangered;
	}
	.dish-cnt {
		border: 1rpx solid #a5a5a5;
		border-radius: 8rpx;
	}
	.total-pay {
		width: 700rpx - 25*2;
		background-color: green;
		margin-bottom: 25rpx;
	}
</style>
